<template>
	<view class="my-income">
		<view class="my-incomeTop">
			<view class="my-incomeTopL">
				<view class="my-incomeTopLTitle">
					总金额(元)
				</view>
				<view class="my-incomeTopLPrice">
					{{userInfo.cash_amount}}
				</view>
			</view>
			<view class="my-incomeTopR" @click="opentixian">
				申请提现
			</view>
		</view>
		<view class="tixianBox">
			<view class="tixianBox-Title">
				提现明细
			</view>
			<view class="tixianitem-box">
				<view class="tixianitem" v-for="item in CashList" :key="index">
					<view class="tixianitemL">
						<view class="tixianitemL-name">
							{{item.name}}
						</view>
						<view class="tixian-bankname">
							{{item.bank_name}}
						</view>
						<view class="tixianitemL-time">
							{{item.create_at}}
						</view>
						
					</view>
					<view class="tixianitemR">
						<view class="tixianprice">
							{{item.cash_amount}}
						</view>

						<view class="tixian-bankcard">
							{{item.bank_num}}
						</view>
					</view>

				</view>
			</view>
		</view>
		
			<uni-popup ref="inputDialog" type="dialog">
							<uni-popup-dialog ref="inputClose"  mode="input" title="输入提现金额" value=""
								placeholder="请输入提现金额" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
	</view>
</template>

<script>
	let that
	import {mapGetters} from "vuex"
	import {toLogin} from "@/libs/login.js"
	import tool from "@/extend/tool.js"
	import {
		getUserInfo,
		getCashList,
		applyCash
	} from '@/api/user.js';
	export default{
		data(){
			return {
				uid: 0,
				userInfo: {},
				isFollow: false,
				mTypeList: [],
				currMTypeIndex: 0,
				currMType: {},
				cateList: [],
				currCateIndex: 0,
				currCate: {},
				
				list: [],
				loadStatus: "more",
				page: 1,
				total: 0,
				isReset: false,
				CashList:[],
				tixianPrice:"",
			}
		},
		computed:{
			...mapGetters(['isLogin'])
			
		},
		onLoad(opts){
			this.getUserInfo()
			this.getCash()
			// that = this
			// this.uid = parseInt(opts.uid || 0)
			// this.getInitDataUserInfo();
			// this.getProductList();
		},
		methods:{
			// 获取提现记录
			getCash(){
				getCashList().then(res=>{
					console.log(res);
					this.CashList = res.data
				})
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					// that.$store.commit("SETUID", res.data.uid);
					// that.orderMenu.forEach((item, index) => {
					// 	switch (item.title) {
					// 		case '待付款':
					// 			item.num = res.data.orderStatusNum.unpaid_count
					// 			break
					// 		case '待发货':
					// 			item.num = res.data.orderStatusNum.unshipped_count
					// 			break
					// 		case '待收货':
					// 			item.num = res.data.orderStatusNum.received_count
					// 			break
					// 		case '待评价':
					// 			item.num = res.data.orderStatusNum.evaluated_count
					// 			break
					// 		case '售后/退款':
					// 			item.num = res.data.orderStatusNum.refunding_count
					// 			break
					// 	}
					// })
					// uni.stopPullDownRefresh();
				});
			},
			opentixian(){
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(e){
				console.log(e)
				this.tixianPrice = e
				applyCash({
					cash_amount: e
				}).then(res=>{
					console.log(res);
					if(res.status==200){
						this.getUserInfo()
						this.getCash()
					}
					// this.CashList = res.data
				}).catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								});
							});
			},
		},
		// onReachBottom() {
		// 	this.getProductList();
		// }
	}
</script>

<style lang="scss" scoped>
	@mixin flex {
		display: flex;
	}
	.my-income{
		.my-incomeTop{
			width: 96%;
			height: 360rpx;
			background: linear-gradient(to right, #f08b41, #ef785f) ;
			margin: 10rpx auto;
			border-radius: 20rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.my-incomeTopL{
				.my-incomeTopLTitle{
				font-size: 26rpx;
				color: #fff;
				margin-bottom: 15rpx;
				}
				.my-incomeTopLPrice{
					font-size: 56rpx;
					color: #fff;
					margin-bottom: 15rpx;
				}
			}
			.my-incomeTopR{
				width: 180rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 30rpx;
				color: #ffac06;
				border-radius: 30rpx;
				background-color: #fff;
			}
		}
		.tixianBox{
			width: 96%;
			.tixianBox-Title{
				font-size: 36rpx;
				color: #000;
				font-weight: 500;
				margin: 10rpx auto;
				margin-top: 30rpx;
				padding: 0 30rpx;
			}
			.tixianitem-box{

				margin: 10rpx auto;
				margin-top: 20rpx;
				padding: 0 0rpx 0 30rpx;
				.tixianitem{
					display: flex;
					// align-items: center;
					justify-content: space-between;
					// height: 120rpx;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #ccc;
					.tixianitemL{
						.tixianitemL-name{
							font-size: 28rpx;
							color: #333;
							margin-bottom: 15rpx;
						}
						.tixian-bankname{
							font-size: 28rpx;
							color: #333;
							margin-bottom: 15rpx;
						}
						.tixianitemL-time{
							font-size: 24rpx;
							color: #999;
						}
					}
					.tixianitemR{
						
						.tixianprice{
							font-size: 30rpx;
							color: #FF2600;
							margin-bottom: 15rpx;
						}
					.tixian-bankcard{
						font-size: 28rpx;
						color: #333;
						margin-bottom: 15rpx;
					}
					}

					
				}
			}
		}
	}

</style>